I have declared a variable var scale=0.8 in a script on the body of my html and when i resize a graph made by mermaid i update the scale accordingly, for example
<script>
var scale=0.8;
DeployGraph();
function toggleZoomScreen(mode){
if (mode == 1){
scale+=0.1;
// document.body.style.zoom=scale.toString()+"%";
}
else if (mode == 2){
scale-=0.1;
// document.body.style.zoom=scale.toString()+"%";
}
var mer = document.getElementById("mermaid");
mer.style.transform= "scale("+scale+","+scale+")";
}
</script>
I want to somehow keep the value of the variable so that every time I refresh, DeployGraph is called and the graph gets resized in that same scale value. DeployGraph is declared on the head of the html, not the body. Can this be done?
I tried creating a different variable in the head and update it everytime the scale value changes, then in the DeployGraph I use
element.style.transform= "scale("+scale+","+scale+")"; where element = document.getElementById("mermaid");
However, the value is always the default.
You can't persist variables across page refreshes.
What you need to do is store the value you need in the browser and check for it once the page loads.
You can do this using URL search parameters, cookies or local storage.
When using local storage, you could do the following:
// On document load, after initialising the scale variable
scale = window.localStorage.getItem('scale') || 0.8; // add || 0.8 in case value is undefined
// In toggleZoomScreen
function toggleZoomScreen(mode){
if (mode == 1){
scale+=0.1;
}
else if (mode == 2){
scale-=0.1;
}
// Update the value in local storage
window.localStorage.setItem('scale', scale);
var mer = document.getElementById("mermaid");
mer.style.transform= "scale("+scale+","+scale+")";
}